<template>
    <a class="ant-dropdown-link" @click="showDrawer">
        编辑
        <down-outlined />
    </a>
    <a-drawer
        title="编辑"
        :width="720"
        :visible="visible"
        :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }"
        @close="onClose"
    >
        <a-form :model="form" :rules="rules" layout="vertical" ref="formRef">
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="用户名" name="name">
                        <a-input v-model:value="form.name" placeholder="请输入用户名"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="用户类型" name="type">
                        <a-select v-model:value="form.type" placeholder="请选择用户类型">
                            <a-select-option value="1">管理员</a-select-option>
                            <a-select-option value="0">普通用户</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="邮箱" name="email">
                        <a-input v-model:value="form.email" placeholder="请输入注册邮箱" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="密码" name="password">
                        <a-input v-model:value="form.password" placeholder="请输入密码" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <template #extra>
            <a-space>
                <a-button @click="onClose">取消</a-button>
                <a-button type="primary" :loading="iconLoading" @click="submitNewAccount">提交</a-button>
            </a-space>
        </template>
    </a-drawer>
</template>

<script>
import { defineComponent, reactive, ref, watch } from 'vue';
import axios from 'axios';

export default defineComponent({
    props: {
        userData: {
            type: Object,
            default: () => ({}),
        },
    },
    setup(props, { emit }) {
        const form = reactive({
            name: '',
            type: '',
            email: '',
            password: '',
        });

        const rules = {
            name: [{ required: true, message: '用户名不能为空！' }],
            type: [{ required: true, message: '用户类型不能为空！' }],
            email: [{ required: true, message: '注册邮箱不能为空！', type: 'email' }],
            password: [{ required: true, message: '请输入密码！' }],
        };

        const visible = ref(false);
        const iconLoading = ref(false);
        const formRef = ref(null);

        // 当点击“编辑”按钮时，表单会根据 `props.userData` 进行预填充
        const showDrawer = () => {
            form.name = props.userData.name || '';
            form.type = props.userData.tags && props.userData.tags.includes('管理员') ? '1' : '0';
            form.email = props.userData.email || '';
            form.password = ''; // 密码通常不从服务端预填充

            visible.value = true;
        };

        const onClose = () => {
            visible.value = false;
            console.log(form)
        };

        const submitNewAccount = async () => {
            formRef.value.validate().then(async () => {
                try {
                    iconLoading.value = true;

                    const postData = {
                        username: form.name,
                        is_superuser: form.type,
                        email: form.email,
                        password: form.password,
                    };

                    await axios.post('http://localhost:8000/api/updateuser/', postData);

                    alert('用户更新成功!');
                    iconLoading.value = false;
                    onClose();
                    emit('refresh');

                } catch (error) {
                    alert('用户更新失败!');
                    console.log(error);
                    iconLoading.value = false;
                }
            }).catch((error) => {
                console.log('表单验证失败:', error);
            });
        };

        return {
            form,
            rules,
            visible,
            showDrawer,
            onClose,
            submitNewAccount,
            iconLoading,
            formRef,
        };
    },
});
</script>
